<breadcrumb></breadcrumb>

<mat-card>
  <mat-card-content>
    <section>
      <h2>Single selection</h2>
      <p>Select your favorite color</p>

      <mat-form-field>
        <mat-label>Colors</mat-label>
        <mat-select [(ngModel)]="selectedColor">
          <mat-option *ngFor="let color of colors" [value]="color.value">
            {{ color.label }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </section>

    <section>
      <h2>Multiple selection</h2>
      <p>Pick toppings for your pizza</p>

      <mat-form-field>
        <mat-label>Toppings</mat-label>
        <mat-select [(ngModel)]="selectedTopping" multiple>
          <mat-option *ngFor="let topping of toppings" [value]="topping.value">
            {{ topping.label }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </section>

    <section>
      <h2>Grouped options</h2>
      <p>Pick your Pokemon</p>

      <mat-form-field>
        <mat-label>Pokemon</mat-label>
        <mat-select [(ngModel)]="selectedPokemon">
          <mat-optgroup *ngFor="let group of pokemon" [label]="group.label">
            <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
              {{ creature.label }}
            </mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>
    </section>

    <section>
      <h2>Colors</h2>

      <div class="demo-select-a11y-spacer">
        <mat-form-field color="primary">
          <mat-label>ZIP code</mat-label>
          <mat-select>
            <mat-option value="2000">2000</mat-option>
            <mat-option value="2100">2100</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field color="accent">
          <mat-label>State</mat-label>
          <mat-select>
            <mat-option value="alaska">Alaska</mat-option>
            <mat-option value="alabama">Alabama</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field color="warn">
          <mat-label>Language</mat-label>
          <mat-select>
            <mat-option value="english">English</mat-option>
            <mat-option value="spanish">Spanish</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div class="demo-select-a11y-spacer">
        <mat-form-field color="primary">
          <mat-label>Digimon</mat-label>
          <mat-select multiple>
            <mat-option value="mihiramon">Mihiramon</mat-option>
            <mat-option value="sandiramon">Sandiramon</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field color="accent">
          <mat-label>Drink</mat-label>
          <mat-select multiple>
            <mat-option value="water">Water</mat-option>
            <mat-option value="coke">Coke</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field color="warn">
          <mat-label>Theme</mat-label>
          <mat-select multiple>
            <mat-option value="light">Light</mat-option>
            <mat-option value="dark">Dark</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </section>
  </mat-card-content>
</mat-card>
